<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="x_title">

            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <form class="form-horizontal form-label-left" novalidate action="" id="commentForm" method="post" enctype="multipart/form-data">
                {notempty name="code"}<p><code>备注:</code>{$code}</a></p>{/notempty}
                <!--<span class="section">Personal Info</span>-->
                <div class="form-group">
                    <label class="col-sm-3 control-label" for="area">所在地区：</label>

                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label" for="area"></label>
                    <div id="container" style="width: 772px;height: 400px; left: 10px;"></div>
                </div>
                <div class="ln_solid"></div>
                <div class="form-group">
                    <div class="col-md-6 col-md-offset-3">
                        <button id="send" type="submit" class="btn btn-success">提交</button>
                        <div class="btn btn-primary" onclick="history.go(-1)">返回</div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'f220e2e404af59b2a4658aa79cecc831',
    }
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=f0b3815b65be563f446de1e6b8e13504"></script>
<script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=f0b3815b65be563f446de1e6b8e13504&plugin=AMap.CitySearch"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=f0b3815b65be563f446de1e6b8e13504&plugin=AMap.AutoComplete"></script>
<script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=f0b3815b65be563f446de1e6b8e13504&plugin=AMap.DistrictSearch"></script>
<script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key=f0b3815b65be563f446de1e6b8e13504&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script>

        var map = new AMap.Map('container', {
            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom:'15.21', //初始化地图层级
            scrollWheel: false, // 禁止鼠标滚轮缩放
        });


            var geocoder = new AMap.Geocoder({
                city: "全国", //城市设为北京，默认：“全国”
            });
            var marker = new AMap.Marker();
            //输入提示
            var autoOptions = {
                input: "address",
            };
            AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete','AMap.Geolocation','AMap.CitySearch'], function(){
                var auto = new AMap.AutoComplete(autoOptions);
                var placeSearch = new AMap.PlaceSearch({
                    map: map
                });  //构造地点查询类
                auto.on("select", select);//注册监听，当选中某条记录时会触发
                function select(e) {
                    console.log(e.poi.name);
                    //  geoCode(e.poi.name);
                    placeSearch.setCity(e.poi.adcode);
                    placeSearch.search(e.poi.name);  //关键字查询查询
                }

                var geolocation = new AMap.Geolocation({
                    // 是否使用高精度定位，默认：true
                    enableHighAccuracy: true,
                    // 设置定位超时时间，默认：无穷大
                    timeout: 10000,
                    // 定位按钮的停靠位置的偏移量
                    offset: [10, 20],
                    //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    zoomToAccuracy: true,
                    //  定位按钮的排放位置,  RB表示右下
                    position: 'RB'
                })
                var citySearch = new AMap.CitySearch()
                citySearch.getLocalCity(function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // 查询成功，result即为当前所在城市信息
                       // console.log(result即为当前所在城市信息);
                    }
                })

                geolocation.getCurrentPosition(function(status,result){

                    if(status=='complete'){
                        onComplete(result)
                    }else{
                        onError(result)
                    }
                });

                function onComplete (data) {
                    console.log(data);
                    var map = new AMap.Map('container', {
                        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
                        zoom:'12.21', //初始化地图层级
                        center: [data.position.lng,data.position.lat], //初始化地图中心点,
                        scrollWheel: false, // 禁止鼠标滚轮缩放
                    });
                    // data是具体的定位信息
                }

                function onError (data) {
                    // 定位出错
                }
            });

            function logMapinfo(){
                var zoom = map.getZoom(); //获取当前地图级别
                var center = map.getCenter(); //获取当前地图中心位置
                console.log(zoom);
                // document.querySelector("#map-zoom").innerText = zoom;
                // document.querySelector("#map-center").innerText = center.toString();
            };

            map.on('moveend', function (e) {

                var zoom = map.getZoom(); //获取当前地图级别
                var center = map.getCenter(); //获取当前地图中心位置

                clearMarker();
                marker = new AMap.Marker({
                    //  icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position: center,
                    //offset: new AMap.Pixel(-13, -30)
                });
                marker.setMap(map);

                var lng_lat = center.toString();
                var lng = lng_lat.split(',')[0];
                var lat = lng_lat.split(',')[1];
                $('[name="lng"]').val(lng);
                $('[name="lat"]').val(lat);
            });
            map.on('zoomend', logMapinfo);


            map.on("complete", function(){

                console.log("地图加载完成！");
                var zoom = map.getZoom(); //获取当前地图级别
                var center = map.getCenter(); //获取当前地图中心位置
                // document.querySelector("#map-zoom").innerText = zoom;
                // document.querySelector("#map-center").innerText = center.toString();
                clearMarker();
                marker = new AMap.Marker({
                    //  icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position: center,
                    //offset: new AMap.Pixel(-13, -30)
                });
                marker.setMap(map);

            });
            map.on('click', function(e) {
                console.log(e);
                $('[name="lng"]').val(e.lnglat.getLng());
                $('[name="lat"]').val(e.lnglat.getLat());
                //document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
                addMarker(e);
            });

            function clearMarker() {
                if (marker) {
                    marker.setMap(null);
                    marker = null;
                }
            }

            function addMarker(e) {
                clearMarker();
                marker = new AMap.Marker({
                    //  icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position: [e.lnglat.getLng(), e.lnglat.getLat()],
                    //offset: new AMap.Pixel(-13, -30)
                });
                marker.clear;
                marker.setMap(map);
            }
            function geoCode(v) {

                // var address  = document.getElementById('address').value;
                var address = "哈尔滨市香坊区化工路39号";
                <!--        alert(address);-->
                geocoder.getLocation(v, function(status, result) {
                    if (status === 'complete'&&result.geocodes.length) {
                        var lnglat = result.geocodes[0].location
                        // document.getElementById('lnglat').value = lnglat;
                        marker.setPosition(lnglat);
                        map.add(marker);
                        map.setFitView(marker);
                    }else{

                    }
                });
            }
            $('[name="prov"]').change(function () {
                var v = $(this).val();
                geoCode(v);
            });
            $('[name="city"]').change(function () {
                localStorage.setItem('city',$('[name="city"]').val());
                var v = $(this).val();
                geoCode(v);
            });
            $('[name="area"]').change(function () {
                var v = $(this).val();
                geoCode(v);
            });
            $('[name="address"]').keyup(function () {
                var v = $(this).val();
                var address = $('[name="prov"]').val()+$('[name="city"]').val()+$('[name="area"]').val()+v;
                geoCode(address);
            });

</script>


